<template>
  <view class="sku-count">
    <view class="content">
      <view class="text">购买数量</view>
      <view class="number">
        <view class="minus" @click="minus">-</view>
        <input class="input" type="number" v-model="number" disabled="disabled">
        <view class="plus" @click="plus">+</view>
      </view>
    </view>
  </view>
</template>

<script>
import store from 'store'
import { mapActions,mapGetters } from 'vuex'

export default {
  name: "ProductSelectedSkuCountCom",
  store,
	computed: {
	  ...mapGetters([
	    'selectedSkuCount'
	  ])
	},
  data: () => ({
    min: 1,
    max: 1000,
    step: 1,
    number: 1
  }),
  watch: {
    selectedSkuCount: {
      handler(val) {
        if (this.selectedSkuCount) {
          this.number = this.selectedSkuCount
        }
      },
      immediate: true
    },
   
  },
  methods: {
    ...mapActions([
      'refreshSelectedSkuCount'
    ]),
	
    minus() {
      if (this.number > this.min) {
        this.number -= this.step
        this.refreshSelectedSkuCount(this.number)
      }
    },
    plus() {
      if (this.number < this.max) {
        this.number += this.step
        this.refreshSelectedSkuCount(this.number)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sku-count {
  .content {
    display: flex;
    justify-content: space-between;
    margin: 20rpx;
    padding-bottom: 40rpx;
    
    .text {
		font-size:18rpx;
		line-height:50rpx;
    }
   .number {
     display: flex;
     height: 50rpx;
   		align-items: center;
     background-color: #fff;
     .input {
       display: flex;
       width: 60rpx;
   			height: 50rpx;
       align-items: center;
   			text-align: center;
       background-color: #fff;
     }
     .minus,.plus {
       display: flex;
       width: 32rpx;
   	height: 36rpx;
   	align-items: center;
   	justify-content: center;
   	color:#333;
   	background:#efefef;
   	border:1rpx solid #efefef;
     }
   }
  }
}
</style>
